<template>
	<div>
		<el-timeline class="margin-top-10">
			<el-timeline-item
				v-for="(processItem, processIndex) in ruleForm.processList"
				:key="processIndex"
				style="margin-bottom: 16px;"
				:timestampi="processItem.processName"
				placement="top"
				size="large"
				:type="!processItem.state ? 'info' : processItem.state === 1 ? 'primary' : 'success'"
				:icon="!processItem.state ? 'el-icon-more' : processItem.state === 1 ? 'el-icon-s-flag' : 'el-icon-check'"
			>
				<div class="width-100-percent">
					<div class="flex-start-center width-100-percent">
						<div style="color: #17233d;font-size: 18px;margin-right: 10px">
							<!--<span class="el-icon-paperclip item-gap"></span>-->
							<span>{{ processItem.processName }}</span>
						</div>
						<!--<span style="font-size: 13px;">总产量: {{ processItem.processShiftQty || 0 }}KG</span>-->
					</div>
				</div>
				<jk-card :show-header="false" :header-style="{background: '#f8f8f9', borderBottom: 'solid 1px #e6ebf5'}" :body-style="{background: '#f8f8f9', padding: '16px',}">
					<div class="" style="background: #f8f8f9;">
						<div style="border-bottom: solid 1px #eee;width: 100%;margin-bottom: 10px;font-size: 14px;height: 34px;line-height: 34px;">
							<el-row>
								<el-col :span="4">
									<div>
										<span>实时产量(kg): </span>
										<span>{{ processItem.processShiftQty }}</span>
									</div>
								</el-col>
								<el-col :span="4">
									<div>
										<span>称重产量(kg): </span>
										<span>{{ processItem.processNetWeight }}</span>
									</div>
								</el-col>
								<el-col :span="4">
									<div>
										<span>能耗(kw·h): </span>
										<span>{{ processItem.processShiftElectricEnergy }}</span>
									</div>
								</el-col>
								<el-col :span="4">
									<div>
										<span>工资: </span>
										<span>{{ processItem.ddd || 0 }}</span>
									</div>
								</el-col>
								<el-col :span="4">
									<div>
										<span>总工时(h): </span>
										<span>{{ processItem.totalWorkHours }}</span>
									</div>
								</el-col>
							</el-row>
						</div>
						<div style="display: flex;flex-wrap: wrap;">
							<div v-for="(machineItem, machineIndex) in processItem.productOrderMachineList" :key="machineIndex" style="width: calc(100% / 10)">
								<machineInfoPopover
									:process-item="processItem"
									:machine-item="machineItem"
								></machineInfoPopover>
							</div>
						</div>
					</div>
				</jk-card>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import jkProgress from '../../../../jk-components/jk-progress';
    import machineInfoPopover from '../machine-info-popover';
    export default {
        props: {
            height: {
                type: Number,
                default: 0
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        components: {
            machineInfoPopover,
            jkProgress
        },
        data() {
            return {
                ruleForm: {}
            };
        },
        methods: {
            getData() {
                this.ruleForm = JSON.parse(JSON.stringify(this.formData));
            }
        },
        mounted() {
            this.getData();
        },
        watch: {
            formData: {
                handler() {
                    this.getData();
                },
                deep: true
            }
        }
    };
</script>
